<template>
  <!-- 试题列表展示组件 -->
  <div class="question-container">
    <!-- 表格区 -->
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="number" :label="$t('route.number')" width="210" align="center"></el-table-column>
      <el-table-column prop="subject" :label="$t('route.subject')" width="120" align="center"></el-table-column>
      <el-table-column prop="catalog" :label="$t('route.directory')" width="120" align="center"></el-table-column>
      <el-table-column :label="$t('route.type')" width="120" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.questionType | questText }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('table.stem')"
        width="220"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span v-html="scope.row.question"></span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.creatDate')" width="180" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.addDate | parseTimeByString }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('route.difficulty')" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.difficulty | difficultType }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="creator"
        :label="$t('route.creator')"
        width="120"
        align="center"
      ></el-table-column>
      <el-table-column :label="$t('table.chkState')" width="120" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.chkState | chkState }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="chkRemarks"
        :label="$t('table.chkRemarks')"
        width="130"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="chkUser"
        :label="$t('route.chkUser')"
        width="120"
        align="center"
      ></el-table-column>
      <el-table-column :label="$t('table.publishState')" width="120" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row | publishDetail }}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        :label="$t('table.actions')"
        width="200"
        class="opation"
        align="center"
      >
        <template slot-scope="scope">
          <!-- slot-scope="scope" -->
          <div class="opationbtns">
            <el-button type="text" @click="showPreviewDialog(scope.row)"
              >预览</el-button
            >
            <el-button
              type="text"
              :disabled="scope.row.chkState == 1"
              @click="showChkDialog(scope.row.id)"
              >审核</el-button
            >
            <el-button
              type="text"
              :disabled="scope.row.publishState == 1"
              @click="
                $router.push({
                  path: '/questions/new',
                  query: { id: scope.row.id }
                })
              "
              >修改</el-button
            >
            <el-button type="text" @click="openOnShelf(scope.row, $event)">
              {{ scope.row.publishState ? '下架' : '上架' }}
            </el-button>
            <el-button
              type="text"
              :disabled="
                scope.row.chkState === 1 && scope.row.publishState === 1
              "
              @click="delQuestion(scope.row)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- /表格区 -->
    <!-- 审核对话框 -->
    <el-dialog :visible.sync="chkDialogVisible" width="30%" class="chkDialog">
      <span slot="title" class="chkTitle">题目审核</span>
      <el-form :model="chkForm" class="demo-form-inline">
        <div>
          <el-radio v-model="chkForm.chkState" :label="1">通过</el-radio>
          <el-radio v-model="chkForm.chkState" :label="2">拒绝</el-radio>
        </div>
        <el-input
          class="textBox"
          type="textarea"
          v-model.trim="chkForm.chkRemarks"
          placeholder="请输入审核意见"
        ></el-input>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="chkDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="questionChk">确 定</el-button>
      </span>
    </el-dialog>
    <!-- /审核对话框 -->
    <!-- 预览题库 -->
    <el-dialog
      :visible.sync="previewDialogVisible"
      width="60%"
      class="chkDialog"
    >
      <span slot="title" class="chkTitle">题目预览</span>
      <preview-article
        v-if="previewDialogVisible"
        :currentData="currentData"
      ></preview-article>
      <span slot="footer" class="dialog-footer">
        <el-button @click="previewDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="previewDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- /预览题库 -->
  </div>
</template>

<script>
import { questionType, difficulty, chkType } from '@/api/hmmm/constants'
import { choiceCheck } from '@/api/hmmm/questions'
import PreviewArticle from './preview-article'
export default {
  data() {
    return {
      dltState: false,
      // 审核对话框显示控件
      chkDialogVisible: false,
      chkForm: {
        chkState: 1,
        chkRemarks: '',
        // 审核的试题id
        id: 0
      },
      previewDialogVisible: false,
      // 预览题的信息
      currentData: {}
    }
  },
  components: {
    PreviewArticle
  },
  filters: {
    questText(val) {
      return questionType[val - 1].label
    },
    difficultType(val) {
      return difficulty[val - 1].label
    },
    //审核状态
    chkState(val) {
      return chkType[val].label
    },
    // 发布状态
    publishDetail(val) {
      if (val.chkState === 1 && val.publishState === 1) {
        return '已发布'
      } else if (val.chkState === 1 && val.publishState === 0) {
        return '已下架'
      } else if (val.chkState === 0 || val.chkState === 2) {
        return '待发布'
      }
    }
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    // 题目审核对话框显示
    showChkDialog(id) {
      this.chkForm.id = id
      this.chkDialogVisible = true
    },
    // 题目审核
    async questionChk() {
      if (this.chkForm.chkRemarks === '') {
        this.$message.warning(' 请输入审核意见')
        return
      }
      try {
        await choiceCheck(this.chkForm)
        this.$message.success('审核题目成功')
        this.$emit('chkQuestions')
      } catch (err) {
        this.$message.fail('审核题目失败,请重试')
      }
      this.chkDialogVisible = false
      this.chkForm.chkRemarks = ''
    },
    // 上下架的确认弹框
    openOnShelf(question, e) {
      // console.log(e.target.innerText)
      let msg = ''
      let state = 0
      if (e.target.innerText === '下架') {
        msg = '下架'
        state = 0
      } else {
        if (question.chkState !== 1) {
          return this.$message.info('审核未通过,不能上架!')
        }
        msg = '上架'
        state = 1
      }
      this.$confirm(`您确认${msg}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$emit('changePublishState', question.id, state)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },
    // 删除组题列表
    delQuestion(question) {
      this.$confirm('此操作将永久删除该组题列表, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$emit('deleteQuest', question)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 显示预览对话框
    showPreviewDialog(question) {
      this.currentData = { id: question.id }
      this.previewDialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.question-container {
  .opationbtns {
    ::v-deep .el-button {
      > span {
        font-size: 12px;
      }
    }
  }
  // 题目审核对话框样式
  .chkDialog {
    .chkTitle {
      color: #fff;
    }
    .textBox {
      margin-top: 15px;
    }
    .dialog-footer {
      text-align: center;
    }
  }
}
</style>
